<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        .container {
            display: grid;
            background-color: aquamarine;
            grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
            grid-auto-rows: minmax(100px, auto);
            grid-gap: 20px;
        }



        body {
            width: 90%;
            max-width: 900px;
            margin: 2em auto;
            background-color: beige;
            font:
                    0.9em/1.2 Arial,
                    Helvetica,
                    sans-serif;
        }

        .container > div {
            border-radius: 5px;
            padding: 10px;
            background-color: rgb(207, 232, 220);
            border: 2px solid rgb(79, 185, 227);
        }
    </style>
</head>
<body>
<div class="container">
  <div>One
      <span style="display: block;height: 100px;background-color: aqua"></span>
  </div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

</body>
</html>
